<template>
	<el-autocomplete v-model="value" :fetch-suggestions="querySearch" clearable :placeholder="placeholder" />
	{{value}}
</template>
  
<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { Edit } from '@element-plus/icons-vue'

const props = defineProps(['value1', 'select_list', 'placeholder'])
const value = ref('1')
const param_list = reactive<any[]>([])

onMounted(() => {
	update(props.select_list)
}),
watch(props.select_list, (newValue) => {
	update(newValue)
})
const update = (list) => {
	param_list.length = 0
	list.forEach(element => {
		param_list.push({ value: element })
	});
}

const querySearch = (queryString: string, cb: any) => {
	const createFilter = (queryString: string) => {
		return (item) => {
			return (
				item.value.indexOf(queryString) != -1
			)
		}
	}
	console.log(param_list);
	
	const results = queryString
		? param_list.filter(createFilter(queryString))
		: param_list
	// call callback function to return suggestions
	cb(results)
}
</script>